<template>
	<view>
		<u-popup v-model="show" mode="bottom" border-radius="20"  >
			<view class="p-t-34 popup-con" >
				<view class="flex row-center p-b-36" style="width: 100%; position: relative;box-shadow: 0upx 2upx 2upx 2upx #efefef;" >
					<view class="xl text-center " >
						{{title}}
					</view>
					<view class=" text-right"  style="position: absolute;right: 36upx; " @click="show=false">
						<u-icon name="close" ></u-icon>
					</view>
				</view>
				<scroll-view scroll-y="true" style="height: 680upx;" class="m-t-30 p-b-80 p-r-30"  >
					<view class="p-l-44">
						<u-radio-group v-model="value" @change="radioListChange" >
							<u-radio 
								active-color="#E85631"
								v-for="(item, index) in list" :key="item.id" 
								:name="item.id"
								width="200"
							>
								<view class="m-l-42 flex m-b-30 " style="width: 580upx;height: 246upx;border: 1upx solid #eee;border-radius: 10upx;">
									<view class="flex-1 p-50" style="height: 100%;">
										<image  :src="item.cover" mode="" style="width: 260upx;height:140upx ;"></image>
									</view>
									
									<view class="flex-1 p-t-15" style="height: 100%;">
										<view class="xl">
											{{item.car_name}}
										</view>
										<view class="flex  sm">
											<view class="text-color m-r-10 bold">载重</view>
											<view class="">{{item.car_weight}}</view>
										</view>
										<view class="flex sm">
											<view class="text-color m-r-10 bold">厢长</view>
											<view class="">{{item.car_length}}</view>
										</view>
										<view class="flex sm ">
											<view class="text-color m-r-10 bold">厢宽</view>
											<view class="">{{item.car_width}}</view>
										</view>
									</view>									
								</view>
								
							</u-radio>
						</u-radio-group>
					</view>
				</scroll-view>
				<view class="flex row-between p-t-20 p-b-20 p-r-20 p-l-60 bg-white footer" style="">
					<view class="flex col-baseline bold" style="color:#E85631;">
						<view class="">
							￥
						</view>
						<view class="" style="font-size: 48upx;">
							{{bottomValue}}
						</view>
						
					</view>
					<view class="footer-btn white" @click="sureCar">
						确定
					</view>
				</view>
			</view>
			
		</u-popup>
	</view>
</template>

<script>
	import {carLists} from '@/api/car'
	export default {
		name:"car-popup",
		data() {
			return {
				show:false,
				list:[],
				value:"",
				bottomValue:''
			};
		},
		props:{
			title:{
				type:String,
				default:'选择车型'
			},
			typekey:{
				type:String,
				default:'PRICE'
			}
		},
		watch:{
			value(id){
				console.log(id);
		
			
		      setTimeout(()=>{
				 const item =  this.list.find((item)=>{
				 
				 	if(item.id == id){
				 		return item
				 	}
				 	
				 })
				 		
				 if(this.typekey === 'PRICE'){
				 	this.bottomValue = item.price
				 	console.log(this.bottomValue)
				 } 
			  },400)
		
				
				
			},
		},
		methods:{
			carListsFun(){
				carLists().then(res=>{
			
					this.list = res.data.lists;
					console.log(this.list);
				})
			},
			sureCar(){
				this.show=false;
				this.$emit('sureCar',this.value)
			},
			radioItemChange(e){
				console.log(e)
			},
			radioListChange(e){
				
				console.log(e)
			}
		},
		computed:{
			getMoney(id){
				return function(){
					console.log(id)
					if(id!==''){
						
					}
				}
			}
		},
		beforeMount() {
			this.carListsFun();
			
		}
	}
</script>

<style lang="scss">
	.popup-con{
		padding-bottom: calc(180rpx + env(safe-area-inset-bottom));
	}
	
	.text-color{
		color: #BBBBBB;
	}
	.footer{
		position: fixed;
		z-index: 10;
		bottom: env(safe-area-inset-bottom);
		left: 0;
		width: 100%;
		height: 146upx;
		box-shadow: 0upx -5upx 2upx 2upx #efefef;
		.footer-btn{
			width: 248upx;
			height: 100upx;
			line-height: 100upx;
			text-align: center;
			border-radius: 12upx;
			background-color: #E85631;
		}
	}
</style>
